<template>
  <div>
    <a-modal v-model:visible="store.state.user.role_status" title="绑定用户角色" @ok="handleOk" okText="绑定" cancelText="取消">
      <div class="role_box_row">
        <span>当前用户名称：</span><span>测试</span>
      </div>
      <div class="role_box">
        <div style="width: 3rem">角色</div>
        <a-select
            v-model:value="set_role_data.role_value"
            style="width: 100%"
            @focus="focus"
            ref="select"
            mode="multiple"
            @change="handleChangeSelect"
        >
          <a-select-option v-for="(item,index) in set_role_data.role_list" :key="index" :value="item.roleId">
            {{ item.roleName }}
          </a-select-option>
        </a-select>
      </div>
    </a-modal>
  </div>
</template>
<script>
import {defineComponent, ref, reactive} from 'vue';
import {get_role_all_list, get_role_down} from "@/api/role"
import {setGrantRole} from "@/api/user"
import {useStore} from "vuex"
import {message} from "ant-design-vue"

export default defineComponent({
  setup() {
    //选中的角色id
    let grantRoleIdList = []

    const store = useStore()
    const visible = ref(true);
    const set_role_data = reactive({
      role_value: [],
      role_list: [],
    });


    const showModal = () => {
      visible.value = true;
    };

    const handleOk = e => {
      console.log(e);
      // visible.value = false;
      set_role()
    };

    const handleChangeSelect = (e) => {
      console.log(e);
      grantRoleIdList = e

    }

    const focus = async () => {
      const res = await get_role_down()
      console.log(res)
      if (res.code === 1) {
        set_role_data.role_list = res.data
        return
      }
      set_role_data.role_list = []
    }


    //添加用户角色
    const set_role = async () => {
      const user_data = store.state.user.user_data
      let params = {
        "userId": user_data.userId,
        "grantRoleIdList": grantRoleIdList
      }
      const res = await setGrantRole(params)
      console.log(res)
      store.commit('SET_ROLE_STATUS', false)
      if (res.code === 1) {
        message.success('用户设置权限成功')
        set_role_data.role_value = []
        return
      }
      message.warning(res.message)
    }

    //获取角色的数据

    return {
      visible,
      set_role_data,
      showModal,
      handleOk,
      handleChangeSelect,
      focus,
      store
    };
  },
});
</script>
<style lang="scss" scoped>
.role_box_row {
  display: flex;
  flex-direction: row;
  height: 2rem;
  align-items: center;
  justify-content: flex-start;
}

.role_box {
  display: flex;
  height: 2rem;
  flex-direction: row;
  align-items: center;
}
</style>
